<template>
	<view>
		<!-- 头部 -->
		<view class="heads" :style="{height:statusBarHeight+navBareight +'px'}">
		    <view class="heads-box" :style="{height:statusBarHeight+'px'}"></view>
		    <view class="heads-text" :style="{height:navBareight+'px'}">云南省第一人民医院</view>
			<view class="map">
				<u-icon name="map"></u-icon>
			</view>
			<view class="wendu">
				<u-icon name="setting"></u-icon>
				<text>体感温度 {{headlist[0].realFeel}}°</text>
			</view>
			<view class="ziwaix">
				<image :src="headlist[0].ziwxian_icon" mode=""></image>
				<text>紫外线强度{{headlist[0].windLevel}}W/m</text>
			</view>
		</view>
	     	<!-- 导航 -->
			<view class="navbox">
				 <view class="navitem" v-for="(item,index) in list" :key="index"  @click="godetail">
				 	 <image :src="item.image" mode=""></image>
							 <text>{{item.title}}</text>
				 </view>
			</view>
			<!-- 预约挂号体检   -->
			 <view class="appointment">
						   <view class="appointmentItem1" >
							  <view class="appointment-left">
							  	 <view class="h3">
							  		{{appointmentlist[0].describe}}
							  	 </view>
							  	 <text class="appointment-text">{{appointmentlist[0].title}}</text>
							  </view>
							  <view class="appointment-right">
							  	 <image :src="appointmentlist[0].image" mode=""></image>
							  </view>
						   </view>
						   <view class="appointmentItem2" >
						   			<view class="appointment-left">
						   				<view class="h3">
						   			  	{{appointmentlist[1].describe}}
						   				 </view>
						   		   	   <text class="appointment-text">{{appointmentlist[1].title}}</text>
						   		  </view>
						   		  <view class="appointment-right">
						   		  	 <image :src="appointmentlist[1].image" mode=""></image>
						   	    </view>
						   			</view>
						   </view>
						   
			 	
			 </view>
			
			
			
	   <!-- 科室预约 -->
	    
	<!--    <view class="popularbox">
			 
	      	
	      </view> -->
			
   </view>
</template>

<script>
	
	import {getlist,getweather} from '@/api/api.js'
	
	export default {
		data() {
			return {
				statusBarHeight: 34,
				    navBareight: 45,
				    windowWidth: 34,
				list:[],
				appointmentlist:[],
				// 头部数据
				headlist:[],
				// 科室数据
				popularlist:[]
			}
		},
		async onLoad() {
			//获取手机系统信息 -- 状态栏高度
			   let {statusBarHeight,windowWidth} = uni.getSystemInfoSync()
			   this.statusBarHeight = statusBarHeight
			   this.windowWidth = windowWidth
			   //获取小程序胶囊的高度
			   let {top,bottom,left} = uni.getMenuButtonBoundingClientRect()
			   //高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			   this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight) 
			   this.windowWidth = left
			   console.log(this.navBareight);
			    // 获取经纬度
			   wx.getLocation({
			    type:'wgs84',
			    success:(res)=>{
			     // console.log(res,64);
				    let {longitude,latitude}=res
					  // console.log(longitude,latitude);
					  let obj={
						  longitude,
						  latitude
					  }
				   // 获取天气
				   getweather(obj).then(res=>{
					   console.log(res,92);
					   this.headlist=res.data
				   })
			    }
			   })
			   // 获取首页数据
		   let res=await getlist()
		   console.log(res,69);
		   this.list=res.data[0].vaccine
		   this.appointmentlist=res.data[1].reserve
		   this.popularlist=res.data[2].popularlist
		},
		methods: {
         godetail(){
			 uni.navigateTo({
			 					url:'/pages/detail/index'
			 				})
		 }
		}
	}
</script>

<style lang="scss">
.heads{
	
	  width: 100%;
	  z-index:999;
	  height: 50vh !important;
	  background-size: 100% 110%;
	  background-image: url('https://diancan-1252107261.cos.ap-chengdu.myqcloud.com/tianqi/tianqi-top.png');
}
.heads-text {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
 }
.navbox{
	height: 187rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.navitem{
		width: 112rpx;
		height: 110rpx;
		// background-color: lightpink;
		image{
			width: 51rpx;
			height: 71rpx;
			display: block;
		   padding-bottom: 20rpx;
		   margin: auto;
		}
		
	}
}
.appointment{
	width: 750rpx;
	height: 204rpx;
	display: flex;
	justify-content: space-around;
	background-color: salmon;
    padding: 29rpx 18rpx;
	box-sizing: border-box;
	.appointmentItem1{
		height: 204rpx;
		width: 358px;
		// background-color: paleturquoise;
		background-image: linear-gradient(to right, #d7dfff,#b2ccff,#60a2ff);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		image{
			height: 113rpx;
			width: 134px;
		}
		.h3{
			font-size: 36rpx;
			color: #2a60ff;
		}
		
	}
	.appointmentItem2{
		height: 204rpx;
		width: 358px;
		// background-color: paleturquoise;
		background-image: linear-gradient(to right, #ffdbb4,#ffcb80,#e1741a);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		.h3{
			font-size: 36rpx;
			color: #df6e11;
		}
		image{
			height: 113rpx;
			width: 134px;
		}
	}
}
</style>
